<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="search-type">
    <span class="search-mode" data-type="prefix">
        <i class="mode-icon">⌘1</i>
        前缀匹配
    </span>
    <span class="search-mode" data-type="fuzzy">
        <i class="mode-icon">⌘2</i>
        模糊匹配
    </span>
    <span class="search-mode" data-type="pinyin">
        <i class="mode-icon">⌘3</i>
        拼音匹配
    </span>
  </div>
  <div class="search-container">
    <input type="text" id="searchInput" placeholder="搜索...">
    <svg class="chrome-logo" viewBox="0 0 24 24" width="20" height="20">
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#5f6368"/>
    </svg>
  </div>
  <div id="results"></div>
  <div id="winbar">
    <span class="counter" id="results-counter">0个结果</span>
    <span class="hint">
        使用↑或↓切换 快捷键CTRL+SHIFT+F打开 
        <span class="help-icon" title="使用说明">?</span>
        <span class="version-icon" title="版本更新">i</span>
        <span class="import-export-icon" title="导入导出点击次数">⇄</span>
    </span>
  </div>
  <script src="js/pinyin-pro.js"></script>
  <script src="js/popup.min.js"></script>
  <script src="js/title.min.js"></script>
  <div class="dialog-overlay"></div>
  <div class="confirm-dialog">
    <div class="dialog-content">
        <p>您确定要删除这个书签吗？此操作无法撤销。</p>
        <div class="buttons">
            <button class="cancel-btn">取消</button>
            <button class="confirm-btn">删除</button>
        </div>
    </div>
  </div>
  <div id="version-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>版本更新记录</h3>
        <div class="version-content">
            <!-- 这里的内容会由 JavaScript 动态填充 -->
        </div>
    </div>
  </div>
  <div id="helpModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>书搜索使用说明</h3>
        <div id="helpContent" class="help-content">
            <!-- INFO.md 的内容会被动态加载到这里 -->
        </div>
    </div>
  </div>
  <div id="importExportModal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>导入/导出次数</h3>
        <div class="import-export-content">
            <div class="import-export-buttons">
                <button class="import-export-btn" id="exportBtn">导出</button>
                <button class="import-export-btn" id="importBtn">导入</button>
            </div>
            <textarea class="import-data-area" id="importExportArea" 
                placeholder="导入数据格式：&#13;&#10;{&#13;&#10;  &quot;书签URL&quot;: 点击次数,&#13;&#10;  &quot;https://example.com&quot;: 1&#13;&#10;}"
            ></textarea>
            <div class="import-export-message" id="importExportMessage"></div>
        </div>
    </div>
  </div>
</body>
</html>